<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <!-- 顶部区域 -->
        <a-col :span="24">
          <a-card>
            <div class="box-ver-hor-between">
              <div class="primary-color">资讯管理</div>
              <div>
                <a-button type="primary" class="mr-20">
                  批量导入
                </a-button>
                <a-button type="primary" @click="gotoPage">
                  新增资讯
                </a-button>
              </div>
            </div>
          </a-card>
        </a-col>

        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                @on-search="search"
              ></pro-query>
            </div>
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :operate="operate"
              :param="state.param"
              :pagination="pagination"
              :row-selection="{
                selectedRowKeys: state.selectedRowKeys,
                onChange: onSelectChange
              }"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
  </div>
</template>

<script setup>
import { btnIsPowerByCode, filterEmptyByObject } from "@/tools/common";
import { page } from "@/api/module/message";
import { onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";

const pagination = {
  pageNum: 1,
  pageSize: 10
};
const router = useRouter();

let dictLists = reactive({
  data: {}
});

let searchParams = reactive({
  params: []
});

onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.MESSAGE_TYPE,
    dictEnum.MESSAGE_STATE
  ]);

  searchParams.params = [
    {
      key: "coverType",
      type: "select",
      label: "资讯标签",
      placeholder: "请输入资讯标签",
      options: dictLists.data[dictEnum.MESSAGE_TYPE]
    },
    { key: "title", type: "input", label: "标题", placeholder: "请输入标题" },
    {
      key: "createBy",
      type: "input",
      label: "创建人",
      placeholder: "请输入创建人"
    },
    { key: "releaseTime", type: "rangeTime", label: "发布时间" },
    {
      key: "post",
      type: "select",
      label: "状态",
      placeholder: "请选择状态",
      options: dictLists.data[dictEnum.MESSAGE_STATE]
    }
  ];
});

const fetch = async param => {
  let response = await page(param);
  return {
    data: response.data.record,
    total: response.data.total
  };
};

const search = value => {
  console.log(value, "value");
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value)
  };
};

const columns = [
  {
    dataIndex: "coverType",
    key: "coverType",
    title: "资讯标签",
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_TYPE]) {
        const item = dictLists.data[dictEnum.MESSAGE_TYPE].find(
          v => v.value == data
        );
        return item ? item.label : "";
      }
      return "";
    }
  },
  { dataIndex: "title", key: "title", title: "标题" },
  {
    dataIndex: "address",
    key: "address",
    title: "状态",
    cellRender: (record, data) => {
      if (dictLists.data[dictEnum.MESSAGE_STATE]) {
        const item = dictLists.data[dictEnum.MESSAGE_STATE].find(
          v => v.value == data
        );
        return item ? item.label : "";
      }
      return "";
    }
  },
  { dataIndex: "createBy", key: "createBy", title: "创建人" },
  { dataIndex: "createTime", key: "createTime", title: "创建时间" }
];

const operate = [
  // { label: "详情", event: function (record) { state.visibleInfo = true; state.recordInfo = record }},
  // { label: "删除", event: function (record) { removeMethod(record) }},
  { label: "详情" },
  { label: "上架" },
  { label: "下架" }
];

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  recordEdit: {},
  recordInfo: {}
});

const onSelectChange = selectedRowKeys => {
  state.selectedRowKeys = selectedRowKeys;
};

const gotoPage = () => {
  router.push("/university/message-manage/add");
};
</script>

<style scoped></style>
